<template>
  <xn-dialog
    custom-class="add-and-edit-dialog"
    :title="roleInfo.id ? '编辑角色' : '添加角色'"
    :visible.sync="selfVisible"
    @close="closeDialog">
    <el-scrollbar class="info-box">
      <div class="base-info">
        <div class="sec-title">基本信息</div>
        <slot name="baseInfo"></slot>
      </div>
      <div class="qx-info">
        <div class="sec-title">权限信息</div>
        <slot name="qxInfo"></slot>
      </div>
    </el-scrollbar>
    <slot name="bottom"></slot>
  </xn-dialog>
</template>
<script>
import XnDialog from '@com/xnDialog.vue'

export default {
  name: 'RoleDialog',
  components: { XnDialog },
  emits: ['close', 'submit'],
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    info: {
      type: Object,
      default: () => { },
    },
  },
  data() {
    return {
      selfVisible: false,
      roleInfo: {},
      saveType: '1',
    }
  },
  watch: {
    visible(bool) {
      this.selfVisible = bool
    },
    info: {
      handler(obj) {
        if (obj && obj.id) {
          this.roleInfo = obj
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    closeDialog() {
      this.selfVisible = false
      this.$emit('close', false)
      this.$emit('update:visible', false)
    },
  },
}
</script>
<style lang="scss" scoped>
.add-and-edit-dialog {
  ::v-deep &.el-dialog {
    margin-top: 5vh !important;
    width: 640px;
    height: 80vh;
    max-height: 600px;

    .xn-dialog-body {
      display: flex;
      flex-direction: column;

      .info-box {
        flex: 1;
      }

      .sec-title {
        font-size: 14px;
        line-height: 24px;
        color: #333;
        font-weight: 600;
        margin-bottom: 10px;
      }

      .btn-box {
        text-align: center;
        margin-top: 20px;
        border-top: 1px solid #e4eaf0;
        padding-top: 20px;
      }
    }
  }
}
</style>
